<template>
  <AppPage :show-footer="false">
    <n-card title="预约记录" :bordered="false">
      <!-- 日期选择器 -->
      <n-date-picker
          v-model:value="selectedDate"
          type="date"
          placeholder="选择日期"
          @update:value="handleDateChange"
      />
      <!-- 甘特图容器 -->
      <div ref="ganttContainer" style="width: 100%; height: 550px;"></div>
    </n-card>
  </AppPage>
</template>

<script setup>
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
import {onMounted, ref, onBeforeUnmount, watch} from 'vue';
import gantt from 'dhtmlx-gantt';
import {NDatePicker} from 'naive-ui';

// 默认选择的日期
const selectedDate = ref(new Date('2023-10-01'));

// 创建一个 ref 来绑定甘特图的容器
const ganttContainer = ref(null);

const initGantt = () => {
  if (ganttContainer.value) {
    // 设置甘特图的日期格式
    gantt.config.xml_date = '%Y-%m-%d %H:%i'; // 支持小时和分钟

    // 设置甘特图的基本配置
    gantt.config.columns = [
      {name: 'text', label: '任务', width: 200},
      {name: 'start_date', label: '开始时间', align: 'center'},
      {name: 'duration', label: '持续时间', align: 'center'},
    ];

    // 设置甘特图的时间单位为小时，显示细化的30分钟刻度
    gantt.config.scale_unit = 'hour'; // 主刻度为小时
    gantt.config.date_scale = '%H:%i'; // 时间刻度为小时:分钟
    gantt.config.step = 30; // 设置为30分钟为步长

     // 设置细化的子刻度为 30 分钟
    // gantt.config.subscales = [
    //   {unit: 'minute', step: 30, template: '%H:%i'}, // 细化时间刻度为30分钟
    // ];

    // 设置甘特图显示的最小日期和最大日期（一天的范围）
    const minDate = new Date(selectedDate.value);
    minDate.setHours(0, 0, 0, 0); // 当天 00:00
    const maxDate = new Date(selectedDate.value);
    maxDate.setHours(23, 59, 59, 999); // 当天 23:59

    gantt.config.min_date = minDate;
    gantt.config.max_date = maxDate;

    // 渲染甘特图
    gantt.init(ganttContainer.value); // 使用 ref 绑定的容器初始化甘特图
    gantt.parse({data: tasks.value}); // 将任务数据传入甘特图
  }
};

// 示例任务数据（预约），持续时间单位为小时
const tasks = ref([
  {id: 1, text: '预约 1', start_date: '2023-10-01 08:00', duration: 1}, // 持续1小时
  {id: 2, text: '预约 2', start_date: '2023-10-01 09:30', duration: 1}, // 持续1小时
  {id: 3, text: '预约 3', start_date: '2023-10-01 11:00', duration: 0.5}, // 持续30分钟
]);


// 监听日期变化，重新初始化甘特图
const handleDateChange = (date) => {
  selectedDate.value = date;
  initGantt();
};

// 模拟从后端加载数据
const fetchAppointments = async (date) => {
  // 这里可以调用 API 获取数据
  // const response = await fetch(`/api/appointments?date=${date.toISOString()}`);
  // const data = await response.json();
  // tasks.value = data; // 更新任务数据
};

// 监听日期变化，加载数据
watch(selectedDate, (newDate) => {
  fetchAppointments(newDate);
  initGantt();
});

// 组件挂载时初始化甘特图
onMounted(() => {
  fetchAppointments(selectedDate.value);
  initGantt();
});

// 组件卸载时清理甘特图实例
onBeforeUnmount(() => {
  gantt.clearAll();
});
</script>